<template>
  <view class="myEarnings">
    <!-- //蒙层 -->
    <view class="masked"  :style="{backgroundImage: 'url(' + maskedImage +')'}" v-show="!mask && maskedShow">
      <view  @click="maskedClick" class="iKnow">我知道了</view>
    </view>
    
    <view class="myEarningsTop" :style="{backgroundImage: 'url(' + bgImage +')'}">
      <view class="balanceAccount-t">
        <view class="account-deposit">
          <view class="depositTxt">预收益(元)</view>
          <view class="account-money">{{earningsFrom.prearnIncome + '' || '-'}}</view>
        </view>
      </view>
      <view class="balanceAccount-b">
        <view class="account-earnings">
          <view class="earnings-txt">累计收益(元)：</view>
          <view class="earnings-txt">
            {{earningsFrom.accumulatedIncome + '' || '-'}}
          </view>
        </view>
        <view class="account-earnings">
          <view class="earnings-txt">已转入钱包(元)：</view>
          <view class="earnings-txt">
            {{earningsFrom.profit + '' || '-'}}
          </view>
        </view>
      </view>
    </view>
    <view class="myEarningsB">
      <view class="chartEarnings">
        <view class="timeSelect">
          <view class="middleTo">
            <picker mode="date" :value="startDate" :end="startDate"  @change="beginDateChange">
              <view class="date">{{pageInfo.beginDate || '开始时间'}}</view>
            </picker>
          </view>
          <view class="middleTo">至</view>
          <view class="middleTo">
            <picker mode="date" :value="startDate" :start="pageInfo.beginDate" :end="startDate" @change="endDateChange">
              <view class="date">{{pageInfo.endDate || '结束时间'}}</view>
            </picker>
          </view>
        </view>
      </view>
      <view class="">
        <chart chartType="ring" :opts="ringOption" @getDataIndex="getCurrentDataIndex" canvasId="u-ring-canvas" ref="ringChart" :customStyle="{margin: '0 auto'}"></chart>
      </view>
      <view class="clientBox">
        <!-- 状态搜索 -->
        <view class="selectListBox">
          <view class="statistics">
            查询统计:￥{{statistics.incomeSum || '0'}}
          </view>
          <view class="selectList">
            <view class="gradeSelect">
              <!-- <view class="uni-list-cell">
                <view class="uni-list-cell-db">
                  <picker @change="bindPickerChange" :value="type" :range="memberRank " range-key="typeName">
                    <view class="uni-input">{{memberRank[type].typeName}}</view>
                  </picker>
                </view>
              </view> -->
              <picker @change="bindPickerChange" :value="type" :range="memberRank " range-key="typeName">
                <view class="uni-input textEllipsis" style="width: 176rpx;">{{memberRank[type].typeName}}</view>
              </picker>
            </view>
            <view class="statusSelect">
              <view class="uni-list-cell">
                <view class="uni-list-cell-db">
                  <picker @change="statusChange" :value="status" :range="statusList" range-key="name">
                    <view class="uni-input">{{statusList[status].name}}</view>
                  </picker>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 数据列表 -->
        <view class="clientList">
          <view class="clientItem" v-for="(item,index) in clientList" :key = "index" @click="clientItem(item)">
            <view class="clientItem-item-box">
              <view class="clientItem-item">
                <view class="clientItem-l">
                  <view class="clientItem-l-l">
                    <view class="clientItem-l-l-img">
                      <image style="width: 100rpx; height: 100rpx; border-radius: 50%;overflow:hidden;" :src="item.url" mode=""></image>
                    </view>
                  </view>
                  <view class="clientItem-l-r">
                    <view class="clientItem-l-r-t">
                      <text class="name">{{item.nickName}}</text>
                      <text class="authentication">({{item.realName || '未实名用户'}})</text>
                    </view>
                    <view class="clientItem-l-r-b">
                      {{item.createdAt}}
                    </view>
                  </view>
                </view>
                <view class="clientItem-r">
                  <view class="clientItem-r-txt">{{item.statusName}}</view>
                  <view class="clientItem-r-money">￥ {{item.number}}</view>
                </view>
              </view>
            </view>
            <view class="award">
              <view class="awardText">
                {{item.typeName}}
              </view>
            </view>
          </view>
        </view>
        <view class="loading">
          <view class="loadingImg" v-if="clientList && clientList.length == 0">{{loadingText}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import chart from '@/components/u-charts/component.vue';
import { incomeDetails,findIncomeDetails,incomeDetailsList,rewardCategory } from "../../service/linkEarnings/linkEarnings.service.js"
export default {
  components: { chart },
  data () {
    const currentDate = this.getDate({
      format: true
    })
    return {
      mask:'',
      maskedShow:true,
      maskedImage:require('../../static/image/masked.jpg'),
      // startDate: currentDate,
      beginDate:'',
      bgImage: require('../../static/image/earnings.png'),
      earningsFrom: {
        prearnIncome: '', //预收益
        accumulatedIncome: '', // 累计收益
        profit: '', // 转入钱包
      },
      statistics: {  
        incomeSum: '' //查询统计
      },
      ringOption: {
        dataLabel:true, // 是否在图表中显示数据标签内容值
        background:'#3F4572', // 图标背景颜色
        ringWidth:20, // 设置圆环大小
        legend:{
          show:true, // 是否显示图例
          fontColor:'#FFFFFF',
          lineHeight:'15'
        },
        title: {
          name:'我的收益',
          color: '#FFFFFF',
          fontSize: 14,
          offsetY:5,
          offsetX:2,
        },
        extra: {
          pie: {
            offsetAngle: -45,
            // ringWidth: 40*this.pixelRatio,
            labelWidth:15
          }
        },
        "series": []
      },
      type: 0,
      status:0,
      //等级
      memberRank: [
        {type: '',typeName:'全部类型'},
        // {type: 1,typeName:'达人奖励'},
        {type: 2,typeName:'市场推广奖励'},
        {type: 3,typeName:'自有商城奖励'},
        // {type: 4,typeName:'礼品采购奖励'},
        {type: 5,typeName:'线下流水奖励'},
        // {type: 6,typeName:'爆品奖励'},
        {type: 7,typeName:'外部商城奖励'},
      ],
      //状态
      statusList: [
        {status: '',name:'全部状态'},
        {status: 0,name:'待审核'},
        {status: 1,name:'审核中'},
        {status: 2,name:'审核失败'},
        {status: 3,name:'已发放'},
      ],
      clientList: [],
      startDate: currentDate,
      endDate: currentDate,
      pageInfo: {
        size:10,
        current:1,
        beginDate:'',
        endDate:'',
        status:'', //状态
        category:'' ,// 类型
        type:'', // 这个type是主界面图表点击的category值
      },
      loadingText: '加载中...',
      loadingFlag: false,
      typeCategory: {
        type:1, // type 1: 主界面   2:子界面
        id:'', // 子界面传id根据点击跳转的值
        category:null,  // 1达人奖励,2市场推广奖励,3抵扣商城奖励,4礼品采购奖励,5线下流水奖励,6爆品奖励,7外部商城奖励
        beginDate:'',
        endDate:'',
        status:'',
      }
    }
  },
  onLoad (option) {
    // console.log(option)
    if (option.type) {
      this.typeCategory.type = Number(option.type);
      this.typeCategory.category = Number(option.category);
      this.typeCategory.id = Number(option.id);
      this.pageInfo.current = Number(option.current);
      let beginDate = option.beginDate;
      let endDate = option.endDate;
      if (option.status == '') {
        this.status = Number(option.status); //下标+1
      } else {
        this.status = Number(option.status)+1; //下标+1
      }
      this.getRewardCategory(this.typeCategory.category); // 子界面的类型
      this.getNowMonthDate(beginDate,endDate,status); //默认本月时间
    } else if (option.beginDate) {
      let beginDate = option.beginDate;
      let endDate = option.endDate;
      let status = Number(option.status);
      this.status = status + 1; //下标+1
      this.getNowMonthDate(beginDate,endDate,status); //默认本月时间
    } else {
      this.getNowMonthDate(); //默认本月时间
    }
  },
  onShow() {
    const value = uni.getStorageSync('homeType');
    if(value == 'creator') { //
      uni.setNavigationBarTitle({ // creator：代理端
        title: "创客收益",
      })
    }
    if (value == 'shop') {
      // 动态设置标题 
      uni.setNavigationBarTitle({ //shop：商户端
        title: "异业收益",
      })
    }
    this.mask = uni.getStorageSync('IKnow');
  },
  onReachBottom () {
    let _self = this;
    // 页面滚动到底部的事件
    _self.getMoreDatas();
  },
  methods: {
    maskedClick () { //点击蒙层消失
      uni.setStorage({
        key: 'IKnow',
        data: 'IKnowData'
      })
      this.maskedShow = false;
    },
    getCurrentDataIndex(getCurrentIndex) { // 获取图表index
      // this.ringOption.series.forEach((item, index) => {
      //   if (item.data == 100) {
      //     getCurrentIndex = item.type - 1;
      //   }
      // })
      if (this.typeCategory.type == 1) { // 为type = 1的时候可以点击，为2 的时候不能点击
        switch(getCurrentIndex) {
          case 0:
            uni.navigateTo({
              url: '/pages/linkEarnings/myEarnings?type=2&category=2&id=2&current=1&beginDate=' + this.pageInfo.beginDate + '&endDate=' + this.pageInfo.endDate + '&status=' + this.pageInfo.status
            });
            break;
          case 1:
            uni.navigateTo({
              url: '/pages/linkEarnings/myEarnings?type=2&category=3&id=3&current=1&beginDate=' + this.pageInfo.beginDate + '&endDate=' + this.pageInfo.endDate + '&status=' + this.pageInfo.status
            });
            break;
          case 2:
            uni.navigateTo({
              url: '/pages/linkEarnings/myEarnings?type=2&category=5&id=5&current=1&beginDate=' + this.pageInfo.beginDate + '&endDate=' + this.pageInfo.endDate + '&status=' + this.pageInfo.status
            });
            break;
          case 3:
            uni.navigateTo({
              url: '/pages/linkEarnings/myEarnings?type=2&category=7&id=7&current=1&beginDate=' + this.pageInfo.beginDate + '&endDate=' + this.pageInfo.endDate + '&status=' + this.pageInfo.status
            });
            break;
          }
      }
    },
    getEarningsData () {
      // 我的资产 -接口
      incomeDetails(this.typeCategory,res => {
        if (res.status == 0) {
          this.earningsFrom = res.data;
        }
      })
      // type 1: 主界面   2:子界面   图表-接口
      this.typeCategory.category = this.typeCategory.id;
      findIncomeDetails(this.typeCategory,res => {
        if(res.status == 0) {
          // res.data.marketIncentives = 1;
          // res.data.pvAward = 1;
          // res.data.offlineFlowReward = 100;
          // res.data.thirdPartyRewards = 1;
          // 为主界面时: type：1
          if(this.typeCategory.type == 1) {
            this.ringOption.series = [
              // {
              //   'name':'达人奖励',
              //   'type': 1,
              //   'data':res.data.awardPeople
              // },
              {
                'type': 2,
                'name':'市场推广奖励',
                'data':res.data.marketIncentives || 1
              },{
                'type': 3,
                'name':'自有商城奖励',
                'data':res.data.pvAward || 1
              },
              // {
              //   'type': 4,
              //   'name':'礼品采购奖励',
              //   'data':res.data.purchaseFlowRewards
              // },
              {
                'name':'线下流水奖励',
                'type': 5,
                'data':res.data.offlineFlowReward || 1
              },
              // {
              //   'type': 6,
              //   'name':'爆品奖励',
              //   'data':res.data.explosiveAward
              // },
              {
                'name':'外部商城奖励',
                'type': 7,
                'data':res.data.thirdPartyRewards || 1
              }
            ];
            // for(let i = 0 ;i < this.ringOption.series.length;i++){
            //   this.ringOption.series[i].format=()=>{return this.ringOption.series[i].name+this.ringOption.series[i].data+'%'};
            // }
          }
          // 为子界面时: type：2
          if (this.typeCategory.type == 2) {
            switch(this.typeCategory.category) {
            // case 1:
            //   this.ringOption.series = [
            //     {
            //       'name':'直推达人奖',
            //       'data':res.data.v1type1
            //     },{
            //       'name':'直推达人上级',
            //       'data':res.data.v1type2
            //     },{
            //       'name':'间推达人奖',
            //       'data':res.data.v1type3
            //     },{
            //       'name':'直推达人运营中心奖',
            //       'data':res.data.v1type4
            //     },
            //   ];
            //   break;
            case 2:
              this.ringOption.series = [
                {
                  'name':'达人奖励',
                  'data':res.data.v1Type
                },
                {
                  'name':'商家奖励',
                  'data':res.data.v2Type
                },{
                  'name':'合伙人商户奖励',
                  'data':res.data.v3Type
                },{
                  'name':'大掌柜奖励',
                  'data':res.data.v4Type
                },
              ];
              break;
            case 3:
              this.ringOption.series = [
                {
                  'name':'分享赚达人奖励',
                  'data':res.data.sharingMakes1
                },{
                  'name':'分享赚店铺奖励',
                  'data':res.data.sharingMakes2
                },{
                  'name':'分享赚合伙人商户奖励',
                  'data':res.data.sharingMakes3
                },{
                  'name':'分享赚大掌柜奖励',
                  'data':res.data.sharingMakes4
                },{
                  'name':'分享赚总裁奖',
                  'data':res.data.sharingMakes5
                },{
                  'name':'分享赚间推总裁奖',
                  'data':res.data.sharingMakes6
                },{
                  'name':'分享赚间推大掌柜奖2',
                  'data':res.data.sharingMakes7
                }
              ];
              break;
            // case 4:
            //   this.ringOption.series = [
            //     {
            //       'name':'兑换商户奖励',
            //       'data':res.data.auType1
            //     },{
            //       'name':'兑换合伙人奖',
            //       'data':res.data.auType2
            //     },{
            //       'name':'兑换大掌柜奖',
            //       'data':res.data.auType3
            //     },{
            //       'name':'兑换大掌的上级柜奖',
            //       'data':res.data.auType4
            //     },{
            //       'name':'兑换总裁奖',
            //       'data':res.data.auType5
            //     },{
            //       'name':'兑换总裁上级总裁奖',
            //       'data':res.data.auType6
            //     },{
            //       'name':'兑换股东奖',
            //       'data':res.data.auType7
            //     },
            //   ];
            //   break;
            case 5:
              this.ringOption.series = [
                {
                  'name':'线下流水月结奖励',
                  'data':res.data.easyLineType1
                }
              ];
              break;
            // case 6:
            //   this.ringOption.series = [
            //     {
            //       'name':'爆品直接奖励',
            //       'data':res.data.hotSaleType1
            //     },{
            //       'name':'爆品一代达人奖',
            //       'data':res.data.hotSaleType2
            //     },{
            //       'name':'爆品二代达人奖',
            //       'data':res.data.hotSaleType3
            //     },{
            //       'name':'爆品大掌柜奖',
            //       'data':res.data.hotSaleType4
            //     },{
            //       'name':'爆品总裁奖励',
            //       'data':res.data.hotSaleType5
            //     },{
            //       'name':'爆品总裁上级总裁奖',
            //       'data':res.data.hotSaleType6
            //     },{
            //       'name':'爆品股东奖励',
            //       'data':res.data. hotSaleType7
            //     },
            //   ];
            //   break;
            case 7: 
              this.ringOption.series = [
                {
                  'name':'六大商城分享赚达人奖励',
                  'data':res.data.sharingMakesSix1
                },{
                  'name':'六大商城分享赚店铺奖励',
                  'data':res.data.sharingMakesSix2
                },{
                  'name':'六大商城分享赚合伙人商户奖励',
                  'data':res.data.sharingMakesSix3
                },{
                  'name':'六大商城分享赚大掌柜奖励',
                  'data':res.data.sharingMakesSix4
                },{
                  'name':'六大商城分享赚间推大掌柜奖1',
                  'data':res.data.sharingMakesSix5
                },{
                  'name':'六大商城分享赚间推大掌柜奖2',
                  'data':res.data.sharingMakesSix6
                },
                // {
                //   'name':'六大商城分享赚间推大掌柜奖3',
                //   'data':res.data.sharingMakesSix7
                // },
              ];
              break;
            } 
          }
          this.statistics = res.data;
          this.$refs['ringChart'].changeData('u-ring-canvas', this.ringOption);
        }
      })
    },
    // getMoreDatas () { //获取收益列表
    //   if(this.loadingText != '' && this.loadingText != '加载更多'){
    //     return false;
    //   }
    // },
    //获取子界面奖励值
    getRewardCategory (categoryData) {
      // if (this.typeCategory.type == 2) {
      // this.pageInfo.category = this.typeCategory.category - 1;
      let params = {};
      params.category = categoryData;
      rewardCategory(params,res => {
        this.memberRank  = res.data && res.data.length > 0 ? res.data : [];
        this.memberRank = [{type:'', typeName: '全部类型'}].concat(this.memberRank);
      })
      // }
    },
    getMoreDatas () {
      if(!this.loadingFlag){
        return false;
      };
      this.pageInfo.current++;
      this.getDatas(this.typeCategory.id);
    },
    getDatas (categoryData) {
      this.loadingText = '加载中...';
      uni.showNavigationBarLoading(); // 在当前页面显示导航条加载动画
      let params = this.pageInfo;
      params.type = this.typeCategory.type;
      // 子界面时 type 要比主界面多1 （type+1）
      if(this.typeCategory.type == 2) {
        params.type = categoryData += 1;
      }
      incomeDetailsList(params,res => {
        if(res.status == 0) {
          if(res.data.records && res.data.records.length == 0 && this.clientList.length == 0) {
            this.loadingFlag = false;
            uni.hideNavigationBarLoading();
            this.loadingText = '暂无数据';
            return false;
          }
          if (this.pageInfo.current == 1) {
            this.clientList = res.data.records;
          } else {
            this.clientList = this.clientList.concat(res.data.records);
          }
          uni.hideNavigationBarLoading();
          uni.stopPullDownRefresh();
          if (this.clientList.length == res.data.total) {
            this.loadingFlag = false;
            this.loadingText = '已加载全部'
          } else {
            this.loadingFlag = true;
            this.loadingText = '加载更多'
          }
        } else {
          this.loadingText = '暂无数据';
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    // getDetailsList () {  //获取收益列表
    //   this.getDatas();
    // },
    bindPickerChange (e) { // 选择类型
      this.pageInfo.category = this.memberRank[e.target.value].type;
      this.type = e.target.value;
      this.pageInfo.current = 1;
      this.getDatas(this.typeCategory.id);
    },
    statusChange (e) { // 选择状态 
      this.pageInfo.status = this.statusList[e.target.value].status;
      this.typeCategory.status = this.statusList[e.target.value].status;
      this.status = e.target.value;
      this.pageInfo.current = 1;
      this.getDatas(this.typeCategory.id);
      this.getEarningsData();
    },
    //获取本月
    getNowMonthDate(beginDate,endDate,status) {
      let date = new Date();
      let year = date.getFullYear() + "";
      let month = (date.getMonth() + 1) + "";
      // // 本月第一天日期
      let begin = year + "-" + month + "-01";
      // // 本月最后一天日期
      // let lastDateOfCurrentMonth = new Date(year,month,0);
      // let end = year + "-" + month + "-" + lastDateOfCurrentMonth.getDate();
      if (beginDate && endDate) { //判断是否有值来确定是否跳转
        this.pageInfo.beginDate = beginDate;
        this.pageInfo.endDate = endDate;
        this.typeCategory.beginDate = beginDate;
        this.typeCategory.endDate = endDate;
        this.pageInfo.status = status;
        this.typeCategory.status = status;
      }else {
        this.pageInfo.beginDate = begin;
        this.pageInfo.endDate = this.startDate;
        this.typeCategory.beginDate = begin;
        this.typeCategory.endDate = this.startDate;
      }
      this.getEarningsData();
      this.getDatas(this.typeCategory.id);
    },
    // 选择开始日期
    beginDateChange (e) {
      this.pageInfo.beginDate = e.target.value; //列表时间
      this.typeCategory.beginDate = e.target.value; // 图表时间
      this.getEarningsData();
      this.getDatas(this.typeCategory.id);
    },
    // 选择结束日期
    endDateChange (e) {
      this.pageInfo.endDate = e.target.value; //列表时间
      this.typeCategory.endDate = e.target.value; // 图表时间
      this.getEarningsData();
      this.getDatas(this.typeCategory.id);
    },
    // 获取当前时间
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
    
      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style lang="scss" scoped>
  .masked {
    position: fixed;
    z-index: 999;
    min-height: calc(100vh);
		width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-size: 100% 100%;
    .iKnow {
      position: absolute;
      bottom:100rpx ;
      left: 50%;
      font-size:30rpx;
      transform: translate(-50%, -50%);
      color: #FFFFFF;
      border: 4rpx dashed #fff;
      border-radius: 20rpx;
      width: 80%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
    }
  }
  .myEarnings {
    min-height: calc(100vh);
    padding-bottom: 100rpx;
    background-color: #32355B;
    .myEarningsTop {
			background-size: cover;
      height: 300rpx;
      .balanceAccount-t {
        padding-top: 39rpx;
        .account-deposit {
          text-align: center;
          .depositTxt {
            font-size:30rpx;
            color:rgba(255,255,255,1);
          }
          .account-money {
            margin-top: 23rpx;
            font-size:42rpx;
            font-weight:bold;
            color:rgba(255,255,255,1);
          }
        }
      }
      // 状态展示
      .balanceAccount-b {
          display: flex;
          justify-content: space-between;
          padding: 0 138rpx;
          margin-top: 41rpx;
        .account-earnings {
          text-align: center;
          .earnings-txt {
            font-size:24rpx;
            font-weight:500;
            color:rgba(255,255,255,1);
          }
          .earnings-icon {
            display: inline-block;
            width: 28rpx;
            height: 28rpx;
            border:2rpx solid rgba(255,255,255,1);
            border-radius:50%;
            font-size: 22rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 28rpx;
            margin-left: 29rpx;
          }
        }
      }
    }
    .myEarningsB {
      .chartEarnings {
        text-align: center;
        margin-top: 31rpx;
				.timeSelect {
          border:1px solid rgba(255,255,255,1);
          border-radius:25px;
          display: inline-block;
					vertical-align: middle;
					line-height: 50rpx;
					.middleTo {
						display: inline-block;
						margin: 0 10rpx;
            font-size:24rpx;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
            line-height: 50rpx;
					}
				}
      }
      .clientBox {
        .selectListBox {
          overflow: hidden;
          padding: 0 34rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .statistics {
            padding: 0 36rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            background:rgba(63,69,114,1);
            border-radius:25rpx;
          }
          .selectList {
            display: flex;
            .gradeSelect {
              display: inline-block;
              height: 50rpx;
              width: 186rpx;
              background:rgba(63,69,114,1);
              border-radius:25rpx;
              line-height: 50rpx;
              font-size: 24rpx;
              color: #FFFFFF;
              text-align: center;
              margin-right: 30rpx;
            }
            .statusSelect {
              width: 144rpx;
              height: 50rpx;
              background:rgba(37,41,81,1);
              border-radius:25rpx;
              line-height: 50rpx;
              font-size: 24rpx;
              color: #FFFFFF;
              text-align: center;
            }
          }
        }
        .clientList {
          margin-top: 43rpx;
          padding: 0 35rpx;
      		background-color: #32355B;
          .clientItem {
            // position: relative;
            background-color: #3F4572;
            border-radius:13rpx;
            margin-top: 60rpx;    
            padding: 0 13rpx 0 22rpx;
            .clientItem-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 118rpx;
              .clientItem-l {
                .clientItem-l-l {
                  vertical-align: top;
                  display: inline-block;
                  .clientItem-l-l-img {
                    width: 100rpx;
                    height: 100rpx;
                  }
                }
                .clientItem-l-r {
                  display: inline-block;
                  margin-left: 20rpx;
                  vertical-align: middle;
                  .clientItem-l-r-t {
                    .name {
                      color: #FFFFFF;
                      font-size: 28rpx;
                    }
                    .authentication {
                      color: #FFA173;
                      font-size: 22rpx;
                      margin-left: 30rpx;
                    }
                  }
                  .clientItem-l-r-b {
                    font-size:22rpx;
                    color:rgba(255,255,255,1);
                    margin-top: 15rpx;
                  }
                }
              }
              .clientItem-r {
                font-size: 24rpx;
                color: #FFFFFF;
                    text-align: end;
                .clientItem-r-txt {}
                .clientItem-r-money {
                  margin-top: 23rpx;
                }
              }
            }
          }
          .award {
            height: 42rpx;
						position: absolute;
						margin-left: 20rpx;
						font-size:22rpx;
						font-weight:500;
						color: #FFFFFF;
						padding: 0 20rpx;
            background-color: #3F4572;
            transform: skewX(45deg);
            .awardText {
              transform: skewX(-45deg);
            }
          }
        }
        .loading {
          margin-top: 60rpx;
          text-align: center;
          font-size: 26rpx;
          color: #999999;
          .loadingImg {
            height:118rpx;
            margin: 0 17px;
            line-height: 118rpx;
            background:rgba(63,69,114,1);
            border-radius:13px;
          }
        }
      }
    }
  }
</style>
